<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="升级店主"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <div
                class="experience-special-box"
                v-html="experienceContent"
            ></div>
            <div class="experience-list-box">
                <img
                    class="experience-list-title"
                    src="../../assets/images/experience/list-title.png"
                />
                <div class="experience-list">
                    <div
                        class="experience-item"
                        v-for="(item,index) of experienceList"
                        :key="index"
                        @click="goDetail(item.id,1)"
                    >
                        <img
                            class="goods-img"
                            :src="item.imgs[0].title_img"
                        />
                        <div class="goods-name">{{item.title}}</div>
                        <div class="goods-price">
                            <div class="goods-price-info">
                                <span class="goods-vip-price">￥{{item.price/100}}</span>
                                <span class="goods-market-price">￥{{item.price_market/100}}</span>
                            </div>
                            <img
                                class="buy-btn"
                                src="../../assets/images/experience/be-vip-icons.png"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <img
                class="experience-tips-img"
                src="../../assets/images/experience/experience-tips.jpg"
            />
        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonScroll from '@/components/Scroll'
import CommonHeader from '@/components/Header'
export default {
    name: 'Experience',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0',
                background: '#fff'
            },
            experienceContent: '',
            experienceList: [],
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    mounted() {
        this.getSpeicalExperience()
        this.getExperienceList()
    },
    methods: {
        getSpeicalExperience() {
            let postData = this.qs.stringify({
                id: 10
            })
            this.axios.post('/api/shelf/shelf_one.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.experienceContent = data.data.content
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getExperienceList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                shelf_id: 10,
                all: 0,
                page_size: 10,
                page: this.nowPage
            })
            this.axios
                .post('/api/shelf/shelf_goods.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.experienceList = this.experienceList.concat(
                            data.data.list
                        )
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getExperienceList()
            }
        },
        goDetail(id, type) {
            this.$router.push({
                path: '/goodsDetail',
                query: {
                    goodsId: id,
                    goodsType: type
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.experience-special-box>>>a
    display block
.experience-special-box>>>img
    width 100%
.experience-list-box
    padding 0 0.23rem
    .experience-list-title
        width 100%
    .experience-list
        display flex
        justify-content space-between
        flex-wrap wrap
        padding 0.4rem 0
        .experience-item
            width 4.67rem
            padding-bottom 0.13rem
            border 1px solid #e5e5e5
            border-radius 3px
            overflow hidden
            box-sizing border-box
            margin-bottom 0.16rem
            .goods-img
                width 100%
            .goods-name
                display -webkit-box
                -webkit-box-orient vertical
                overflow hidden
                -webkit-line-clamp 2
                word-break break-all
                line-height 0.5rem
                height 0.98rem
                padding 0.36rem 0.35rem 0.18rem 0.35rem
                font-size 0.37rem
                color #333
            .goods-price
                display flex
                align-items center
                justify-content space-between
                padding 0 0.35rem
                .goods-vip-price
                    font-size 0.37rem
                    color #333
                .goods-market-price
                    font-size 0.32rem
                    color #999
                    text-decoration line-through
                .buy-btn
                    height 0.71rem
.experience-tips-img
    width 100%
</style>

